<template>
  <div :id="id" :style="{ height: height, width: width }"></div>
</template>

<script>
export default {
  name: "OutsidePieChart",
  props: {
    className: {
      type: String,
      default: "outsidePieChart",
    },
    id: {
      type: String,
      default: "outsidePieChart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    outsidePieChartData: {
      type: Object,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
    // console.log(this.outsidePieChartData);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // console.log(echarts);
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id));
      // 绘制图表

      let options = {
        tooltip: {
          trigger: "item",
        },

        legend: {
          show: false,
        },
        title: {
          show: true,
          text: this.outsidePieChartData.title,
          textStyle: {
            color: "rgb(149,149,149)",
            fontWeight: "normal",
            fontSize: 14,
          },
          top: 10,
        },
				color:["#14A3EB","rgb(135,234,254)","#FE4E75","#E47012","#2CBA83","#FFCA03","#9C19D9"],
        series: [
          {
            type: "pie",
            radius: ["40%", "55%"],
            top:30,
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outer",
              formatter: "{c}%\n{b}",
              color: "#000",
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            labelLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            data: this.outsidePieChartData.data,
          },
        ],
      };

      myChart.setOption(options);
      //
    },
  },
};
</script>

<style></style>
